<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
    <link href="${path}/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="${path}/css/register-login/common.css" rel="stylesheet" type="text/css">
    <link href="${path}/css/register-login/style.css" rel="stylesheet" type="text/css">
    <link href="${path}/css/register-login/usercenter-basics.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        #outer{
            /*border: 1px solid #ccc;*/
            /*width: 1200px;*/
            /*height: 750px;*/

            /*div居中*/
            margin:auto;
        }

        #header{
            /*border: 1px solid yellow;*/
            /*height: 150px;*/
            /*width: 1175px;*/

            margin-bottom: 2px;
        }

        #middle{
            /*border: 1px solid red;*/
            /*height: 500px;*/

            margin-bottom: 2px;
        }

        #middle_left{
            /*border: 1px solid cadetblue;*/
            /*width: 150px;*/
            /*height: 498px;*/
            float: left;
            margin-left:15px;

            margin-right: 2px;
        }

        #middle_right{

            /*border: 1px solid blue;*/
            /*height: 498px;*/
            /*width: 994px;*/
            /*1.思考整个middle可见区域的宽度798px
            2.middle_left占本身150px+边框2px
            3.margin-right外边距2px
            4.自己的边框2px*/

            /*798-150-2-2-2 = 642px;*/
            float:left;

        }

        #footer{
            /*border:1px solid darkorange;*/
            float: left;
            /*width:798px;*/
            /*1.最外层div内部可见区域的高度750px
            2.header整个高度占120px+2px
            3.margin-buttom占2px
            4.middle整个高度500px+2px
            5.middle距离footer的外边距2px
            6.footer自己本身的高度2px
            750-120-2-2-500-2-2-2; = 120;*/
            /*height: 120px;*/
        }
    </style>
</head>
<body>
<!--最外层div-->
<div id="outer" class="container">
    <!--定义头部head-->
    <div id="header">
        <!--引入导航begin-->
        <%@ include file="../common/header.jsp"%>
        <!--引入导航end-->
    </div>

    <!--中间的内容的div -->
    <div id="middle">
        <!--中间左边的-->
        <div id="middle_left">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">个人资料</a></li>
                <li class="list-group-item"><a href="${path}/user/changepwd">密码修改</a></li>
                <li class="list-group-item"><a href="${path}/addr/list">收货地址管理</a></li>
                <li class="list-group-item"><a href="${path}/order/inquiry">订单管理</a></li>
            </ul>
        </div>
        <!--中间右边的-->
        <div id="middle_right">
            <%--内容--%>
                <!-- 头部开始 -->
                <section class="p-component-usercenter clearfix">
                    <div class="main">
                        <h6 class="basic">密码修改</h6>
                        <form method="post" name="register" action="${path}/user/updatePwd" onsubmit="return dochangepwd();" >
                            <div class="detail changeTel password-box">
                                <div>
                                    <label class="pull-left">新密码:</label>
                                    <input type="password" class="pull-left " id="newPass" name="password" >
                                </div>
                                <div>
                                    <label class="pull-left newsec">确认密码:</label>
                                    <input type="password" class="pull-left " id="new2Pass" >
                                </div>
                                <button type="submit" class="next-step pull-left btn btn-success">确认提交</button>
                            </div>
                        </form>
                    </div>
                </section>
        </div>
    </div>

    <!--尾部-->
    <div id="footer">
        <!--引入footer begin-->
        <%@ include file="../common/footer.jsp"%>
        <!--引入footer end-->
    </div>
</div>


<!-- jQuery -->
<script src="${path}/js/jquery/jquery-2.2.4.min.js"></script>
<!-- JqueryUI -->
<script src="${path}/js/jquery/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${path}/js/bootstrap/bootstrap.min.js"></script>
<!-- Owl-coursel -->
<script src="${path}/js/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="${path}/js/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="${path}/js/script.js"></script>


<script src="${path}/dist/js/bootstrap.min.js"></script>
<script src="${path}/js/register-login/wow.js"></script>

<script type="text/javascript">
    function switchSysBar() {
        var ssrc = document.getElementById("frmTitle").style.display;
        if (ssrc == "none") {
            document.getElementById("frmTitle").style.display = "";
        }
        else {
            document.getElementById("frmTitle").style.display = "none"
        }
    }
</script>

<script type="text/javascript">
    var password=document.getElementById("newPass");
    password.onblur=function(){
        var reg= /^[A-Za-z0-9_-]{6,12}$/;
        if(reg.test(this.value)){
            return true;
        }else{
            return false;
        }
    }
    var pwd=document.getElementById("new2Pass");
    pwd.onblur=function () {
        if (this.value != null && this.value.trim().length > 0 && this.value == password.value){
            return true;
        }else{
            return false;
        }
    }

    function dochangepwd() {
        if(password.onblur()& pwd.onblur()){
            return true;
        }
        return false;
    }
</script>


</body>
</html>